<template>
  <div class="wh-transform" :class="{ active: isStart, out: !isStart }">
    <div class="inner" ref="triggerDom">
      <p class="fs48">除了翻译文档，您还可以在这里完成</p>
      <h3 class="fs48">
        <span style="color: #ffb10a">文档转换、</span>
        <span style="color: #d7585a">PDF处理</span>
        等一站式操作
      </h3>
      <ul class="transform-list">
        <li>
          <div class="pic">
            <img src="../../assets/images/home/transform01.svg" alt="transform" />
          </div>
          <div class="content">
            <h4 class="fs31">文档比对工具</h4>
            <p class="fs19 pt20">转换文档格式·提升日常办公效率</p>
            <div class="free">免费试用<span></span></div>
          </div>
        </li>
        <li>
          <div class="pic">
            <img src="../../assets/images/home/transform02.svg" alt="transform" />
          </div>
          <div class="content">
            <h4 class="fs31">文档转换</h4>
            <p class="fs19 pt20">转换文档格式·提升日常办公效率</p>
            <div class="free">免费试用<span></span></div>
          </div>
        </li>
        <li>
          <div class="pic">
            <img style="height: 235px" src="../../assets/images/home/transform03.svg" alt="transform" />
          </div>
          <div class="content">
            <h4 class="fs31">PDF处理工具</h4>
            <p class="fs19 pt20">转换文档格式·提升日常办公效率</p>
            <div class="free">免费试用<span></span></div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useScroll } from '@/hooks'

const { triggerDom, isStart } = useScroll()
</script>

<style scoped lang="scss">
@import '@/assets/scss/base.scss';

.wh-transform {
  width: 100%;
  height: 1000px;
  text-align: center;
  background-color: #eef4f6;
  padding-top: 146px;
  box-sizing: border-box;

  &.active {
    p,
    h3,
    .transform-list li {
      opacity: 1;
      transform: translateY(0);
    }

    p {
      transition: all 1s $cubic;
    }

    h3 {
      transition: all 1s 0.3s $cubic;
    }

    .transform-list li {
      @for $i from 1 through 3 {
        &:nth-of-type(#{$i}) {
          transition: all 1s 0.3s * ($i + 1) $cubic;
        }
      }
    }
  }

  &.out {
    p,
    h3,
    .transform-list li {
      opacity: 0;
      transform: translateY(40px);
    }

    p {
      transition: all 1s 1.2s $cubic;
    }

    h3 {
      transition: all 1s 0.9s $cubic;
    }

    .transform-list li {
      @for $i from 1 through 3 {
        &:nth-of-type(#{$i}) {
          transition: all 1s 0.3s * (3-$i) $cubic;
        }
      }
    }
  }

  p,
  h3 {
    opacity: 0;
    transform: translateY(40px);
  }

  .transform-list {
    width: 1436px;
    display: flex;
    justify-content: space-between;
    margin: 0 auto;
    padding-top: 86px;

    > li {
      padding-top: 285px;
      padding-left: 43px;
      box-sizing: border-box;
      width: 457px;
      height: 457px;
      border-radius: 14px;
      text-align: left;
      background-color: rgba(52, 198, 124, 0.16);
      position: relative;
      transform: translateY(40px);

      &:hover {
        &:nth-of-type(1) {
          .pic {
            width: 340px;
          }
        }

        > .pic {
          transform-origin: right top;
          transition: all 1s $cubic;
          width: 240px;
        }

        .free > span {
          transition: all 0.5s;
          width: 30px;
        }
      }

      > .pic {
        width: 230px;
        position: absolute;
        right: 0;
        top: 0;

        img {
          width: 100%;
          height: 100% !important;
          object-fit: contain;
        }
      }

      .free {
        padding-top: 20px;
        color: #0fb964;
        font-size: 20px;
        display: flex;
        align-items: center;

        > span {
          margin-left: 7px;
          display: inline-block;
          width: 16px;
          height: 2px;
          background-color: #0fb964;
          position: relative;

          &::before,
          &::after {
            content: '';
            width: 10px;
            height: 2px;
            background-color: #0fb964;
            position: absolute;
            right: 0;
            top: 50%;
            transform-origin: right center;
            transform: translateY(-50%) rotateZ(45deg);
          }

          &::after {
            transform: translateY(-50%) rotateZ(-45deg);
          }
        }
      }

      &:nth-of-type(1) {
        .pic {
          right: -20px;
          top: -50px;
          width: 330px;
        }
      }

      &:nth-of-type(2) {
        background-color: rgba(255, 198, 77, 0.24);

        .free {
          color: #f5af1c;

          > span {
            background-color: #f5af1c;

            &::before,
            &::after {
              background-color: #f5af1c;
            }
          }
        }
      }

      &:nth-of-type(3) {
        background-color: rgba(240, 86, 71, 0.1);

        .free {
          color: #d55456;

          > span {
            background-color: #d55456;

            &::before,
            &::after {
              background-color: #d55456;
            }
          }
        }
      }
    }
  }
}
</style>
